﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainForm.aspx.cs" Inherits="GolSig.Webforms.MainForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="<%= ResolveClientUrl("~/js/jquery-1.7.2.js") %>"></script>
    <script type="text/javascript" src="<%= ResolveClientUrl("~/js/json2.js") %>"></script>
    <script type="text/javascript">

        var cellstemp;

       

        function animate() {
            window.setInterval(step, 1000);
            step();
        }


        function init() {


            $.ajax({
                type: "POST",
                url: "MainForm.aspx/Initialize",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    cellstemp = data.d;
                    draw(data.d);
                }
            });

        }

        function step() {


            var arg = JSON.stringify({ cells: cellstemp });
            $.ajax({
                type: "POST",
                url: "MainForm.aspx/Step",
                data: arg,
                mimeType: "application/json; charset=utf-8",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    cellstemp = data.d;
                    draw(data.d);
                }
            });
        }



        function draw(cells) {
            var canvas = $("#rectangle")[0];
            if (canvas.getContext) {
                var context = canvas.getContext('2d');


                for (var i in cells) {
                    if (cells[i].Alive) {

                        context.fillStyle = "Black";
                    }
                    else {
                        context.fillStyle = "white";
                    }
                    context.fillRect(cells[i].Position.Row * 10, cells[i].Position.Column * 10, 10, 10);
                }


            } else {

                alert("This page uses HTML 5 to render correctly. Please use html5 compatible browser.");
            }
        }

      
       
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <canvas id="rectangle" width="600" height="600"></canvas>
    </div>
    <input id="ButtonInit" type="button" value="Init" onclick="javascript:init();" />
    <input id="ButtonStep" type="button" value="Step" onclick="javascript:step();" />
    <input id="ButtonAnimate" type="button" value="Animate" onclick="javascript:animate();" />
    </form>
</body>
</html>
